/**
 * WidgetEventShare
 * 分享组件
 */

 import eventHelper from "../../../utils/EventHelper";
 import React,{Component} from "react";
 import { connect } from 'dva';
 import classnames from 'classnames';
 import { bindActionCreators } from 'redux';
 import widgetsActions from '../../../actions/Editor/widgets';
 import editorActions from '../../../actions/Editor/editor';
 import tool from "../../../utils/tool";
 import consts from "../../../consts/consts";
 import storage from "../../../utils/storage";
 import CommonProperty from "./CommonProperty";
 import Validator from "../../../utils/validator/Validator";

 class WidgetEventShare extends Component{
    mixins: [CommonProperty]
    constructor(props) {
        super(props);
        this.state = {             
            invalidUrl: false
        };
    }
    handleOnStateChanged(type, params){
        if(type != "h5_ar_url_switch"){
            return
        }
        const {widget} = this.props, {action} = widget || {}
        let h5_ar_url_switch = widget.action.h5_ar_url_switch;
        if(h5_ar_url_switch == 0){
            h5_ar_url_switch = 1;
        } else {
            h5_ar_url_switch = 0;
        }
        widget.action.h5_ar_url_switch = h5_ar_url_switch;
        this.updateWidgetData(widget);
    }
    handleOnInputBlur(type, e){
        let value = $(e.target).val();
        const {widget} = this.props, {action} = widget || {}
        action[type] = value;
        this.updateWidgetData(widget);
    }
    handleOnStartUpload(type){
        const {setState} = this.props;
        let shareWidgetTypes = {
            0: "share_by_pic",
            1: "share_by_link",
        };
        let param = {};
        //先把类型全设置为 false
        for(let i in shareWidgetTypes){
          param[shareWidgetTypes[i]] = false;
        }
        param[shareWidgetTypes[type]] = true;

        console.log('open dialog');
        setState(param);
//        root.openDialog(consts.DIALOG_TYPE.UPLOAD_PICTURE);
    }
    handleOnCancelUpload(){
        this.helper.cancelUpload();
    }
    handleOnChangeShareType(shared_type, e){
        const {widget} = this.props, {action} = widget || {}, {share_type} = action;
        widget.action.share_type = shared_type;
        this.updateWidgetData(widget);
    }
    handleOnInputChanged(e){
        let element = $(e.target || e.srcElement);
        let url = element.val();
        let result = this.checkValidate(url);
        this.setState({
            invalidUrl: !result
        });
    }
    checkValidate(url){
        let validator = Validator();
        validator.addRule(url, [{
            validator: "url",
            error: $._('Please enter a valid Website')
        }]);
        let errors = validator.execute();
        if (errors){
            return false;
        }
        return true;
    }
    updateWidgetData(widget){
        const {updateWidget,setState} = this.props;
        setState({selectedWidget: widget});
        updateWidget(widget);
    }
    render(){
        const {widget} = this.props, {action} = widget;
        let contentNode = "";
        let share_way = action.share_way || 0,
            share_type = action.share_type || 0,
            share_title = action.share_title || "",
            share_url = action.share_url || "",
            picture_share_url = action.picture_share_url || "",
            link_picture_share_url = action.link_picture_share_url || "",
            h5_ar_url_switch = action.h5_ar_url_switch || 0;

        var headerNode =
            <div className="rowlist">
                <span>类型设置</span>
                <div className="standard">
                    <div onClick={ (e) => this.handleOnChangeShareType(0,e) } className={"page-item " + (share_type === 0 ? "activebtn" : "noactivebtn")}>
                        <span>分享图片</span>
                    </div>
                    <div onClick={ (e) => this.handleOnChangeShareType(1,e) } className={"page-item " + (share_type === 1 ? "activebtn" : "noactivebtn")}>
                        <span>分享链接</span>
                    </div>
                </div>
            </div>
        var errorNode = "";
        if (this.state.invalidUrl && h5_ar_url_switch == "0"){
            errorNode = <div className="alerterror" style={{ padding: 0,marginBottom:"10px" }}>{$._('Please enter a valid Website')}</div>
        }

        //新浪微博
        if (share_way == 2){
            contentNode =
                <div>
                    <div className="rowlist">
                        <div className="shareIme">
                            <div onClick={ () => this.handleOnStartUpload(0) } style={{ backgroundImage:"url(" + picture_share_url + ")" }}>
                                <input type="file" style={{ display: "none" }} accept=".png,.jpg,.jpeg,.PNG,.JPG,.JPEG" />
                            </div>
                        </div>
                        <div className="shareImgTip">上传小于640*640的jpg,png图片</div>
                        <div id="logo_upload_error"></div>
                    </div>
                    <div className="rowlist shareTitle">
                        <div>分享文案</div>
                        <textarea maxLength="75" placeholder="填写分享图片文案；不填则使用默认文案（小于75字）" className="sharetitle form-control page-item" defaultValue={ share_title } name="share_title"  onBlur={ (e) => this.handleOnInputBlur("share_title",e) }></textarea>
                    </div>

                    <div name="tem_widget_change" style={{paddingTop:"10px",clear:"both"}} className="info-item info-item1"　onClick={() => this.handleOnStateChanged("h5_ar_url_switch")}>
                        <label className="label-replace info-item-label">使用作品H5AR链接</label>
                        <div className={"info-item-icon " + (h5_ar_url_switch ? "icon-uniF52F" : "icon-uniF471")}></div>
                    </div>

                    <div className="rowlist shareTitle">
                        <textarea  disabled={ h5_ar_url_switch ? true :false } placeholder="输入链接地址" className="sharetitle form-control page-item" defaultValue={ share_url } name="share_title" onChange={(e) => this.handleOnInputChanged(e)}  onBlur={ (e) => this.handleOnInputBlur("share_url",e)}></textarea>
                        {errorNode}
                    </div>
                </div>
          } else{ //微信
            if(share_type == 0){ //图文分享
              contentNode =
                  <div>
                      {headerNode}
                      <div className="rowlist">
                          <div className="shareIme">
                              <div onClick={ () => this.handleOnStartUpload(share_type) } style={{ backgroundImage:"url(" + picture_share_url + ")" }}>
                                  <input type="file" style={{ display: "none" }} accept=".png,.jpg,.jpeg,.PNG,.JPG,.JPEG" />
                              </div>
                          </div>
                          <div className="shareImgTip">上传小于640*640的jpg,png图片</div>
                          <div id="logo_upload_error"></div>
                      </div>
                      <div className="rowlist shareTitle">
                          <div>分享文案</div>
                          <textarea maxLength="75" placeholder="填写分享图片文案；不填则使用默认文案（小于75字）" className="sharetitle form-control page-item" defaultValue={ share_title } name="share_title"  onBlur={ (e) => this.handleOnInputBlur("share_title",e)}></textarea>
                      </div>
                  </div>
            } else{ //链接分享
                contentNode =
                  <div>
                      {headerNode}
                      <div className="rowlist">
                          <div className="shareIme">
                              <div onClick={ () => this.handleOnStartUpload(share_type) } style={{ backgroundImage:"url(" + link_picture_share_url + ")" }}>
                                  <input type="file" style={{ display: "none" }} accept=".png,.jpg,.jpeg,.PNG,.JPG,.JPEG" />
                              </div>
                          </div>
                          <div className="shareImgTip">上传小于480*480的jpg,png图片</div>
                          <div id="logo_upload_error"></div>
                      </div>
                      <div className="rowlist shareTitle">
                        <textarea maxLength="20" placeholder="输入链接标题（小于20字）" className="sharetitle form-control page-item" defaultValue={ share_title } name="share_title" onBlur={ (e) => this.handleOnInputBlur("share_title",e) }></textarea>
                      </div>

                      <div name="tem_widget_change" style={{paddingTop:"10px",clear:"both"}}  className="info-item info-item1"　onClick={() => this.handleOnStateChanged("h5_ar_url_switch")}>
                          <label className="label-replace info-item-label">使用作品H5AR链接</label>
                          <div className={"info-item-icon " + (h5_ar_url_switch ? "icon-uniF52F" : "icon-uniF471")}></div>
                      </div>
                      <div className="rowlist shareTitle">
                          <textarea  disabled={ h5_ar_url_switch ? true :false } placeholder="输入链接地址" className="sharetitle form-control page-item" defaultValue={ share_url } name="share_title" onChange={(e) => this.handleOnInputChanged(e)} onBlur={ (e) => this.handleOnInputBlur("share_title",e) }></textarea>
                          {errorNode}
                      </div>
                      <p style={{color:"#a4a4a4"}} className="rowlist shareTitle">部分链接可能无法在微信中打开，请自行测试。</p>
                </div>
            }
        }
        return (
            <div className="H5share">
               { contentNode }
           </div>
        )
    }
 }

 const mapStateToProps = ({ editor, widgets ,timelines}) => {
  const pageId = editor.selectedPageId;
  return {
      widget: editor.selectedWidget,
      widgets: widgets.filter(w => w.page_id === pageId),
  };
};

 const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({...widgetsActions,...editorActions}, dispatch);
 };


 export default connect(mapStateToProps, mapDispatchToProps)(WidgetEventShare);
